<template>
  <div class="content">
    <Table class="el-table" :max-height="600" :data="tableData" align="center" :columns="columns" :loading="isLoading" />
  </div>
</template>

<script setup lang="ts">
import Table from '@/widget/table/index.vue';
import type { Column, RowData } from '@/widget/table/type';
import { ref } from 'vue';

const isLoading = ref(true);
// 定义列配置，使用响应式引用以便能够更新列宽
const columns = ref<Column[]>([
  { prop: 'id', label: 'ID', width: 80 },
  { prop: 'name', label: '名称名称名称名称名称名称名称名称' },
  { prop: 'age', label: '年龄', width: 80, filterable: true },
  { prop: 'address', label: '地址', width: 200, sortable: true },
  { prop: 'address', label: '地址', width: 200, filterable: true, sortable: true },
  { prop: 'address', label: '地址', width: 200 },
  { prop: 'address', label: '地址', width: 200 }
]);

// 表格数据
const tableData = ref<RowData[]>([]);

// 初始化空数据
onMounted(() => {
  // 模拟延迟5秒后加载数据
  setTimeout(() => {
    // tableData.value = [
    //   { id: 1, name: '张三', age: 25, address: '北京市朝阳区' },
    //   { id: 2, name: '李四', age: 30, address: '上海市浦东新区' },
    //   { id: 3, name: '王五', age: 28, address: '广州市天河区' },
    //   { id: 4, name: '赵六', age: 35, address: '深圳市南山区' },
    //   { id: 4, name: '赵六', age: 35, address: '深圳市南山区' },
    //   { id: 4, name: '赵六', age: 35, address: '深圳市南山区' },
    //   {
    //     id: 1,
    //     name: '张三',
    //     age: 25,
    //     address: '北京市朝阳区'
    //   },
    //   { id: 2, name: '李四', age: 30, address: '上海市浦东新区' },
    //   { id: 3, name: '王五', age: 28, address: '广州市天河区' },
    //   { id: 4, name: '赵六', age: 35, address: '深圳市南山区' },
    //   { id: 4, name: '赵六', age: 35, address: '深圳市南山区' },
    //   { id: 4, name: '赵六', age: 35, address: '深圳市南山区' },
    //   {
    //     id: 1,
    //     name: '张三',
    //     age: 25,
    //     address: '北京市朝阳区'
    //   },
    //   { id: 2, name: '李四', age: 30, address: '上海市浦东新区' },
    //   { id: 3, name: '王五', age: 28, address: '广州市天河区' },
    //   { id: 4, name: '赵六', age: 35, address: '深圳市南山区' },
    //   { id: 4, name: '赵六', age: 35, address: '深圳市南山区' },
    //   { id: 4, name: '赵六', age: 35, address: '深圳市南山区' },
    //   {
    //     id: 1,
    //     name: '张三',
    //     age: 25,
    //     address: '北京市朝阳区'
    //   },
    //   { id: 2, name: '李四', age: 30, address: '上海市浦东新区' },
    //   { id: 3, name: '王五', age: 28, address: '广州市天河区' },
    //   { id: 4, name: '赵六', age: 35, address: '深圳市南山区' },
    //   { id: 4, name: '赵六', age: 35, address: '深圳市南山区' },
    //   { id: 4, name: '赵六', age: 35, address: '深圳市南山区' },
    //   { id: 5, name: '钱七', age: 22, address: '杭州市西湖区' }
    // ];
    isLoading.value = false; // 数据加载完成后设置为false
  }, 2000);
});
</script>

<style lang="less" scoped>
.content {
  height: 100%;
  display: flex;
  justify-content: center;
}

.el-table {
  width: 500px;
  max-height: 300px;
}
</style>
